<template>
  <div class="recommend" v-loading:[loadText]="loading">
    <Scroll>
      <div>
        <Slide :sliders="sliders" v-if="sliders.length" />
        <main>
          <div class="hot-singer">
            <h1 class="list-title">热门歌单推荐</h1>
            <ul class="hot-singer-ul">
              <li class="hot-singer-li" v-for="album in  albums" :key="album.id">
                <a class="link-a">
                  <div class="pic">
                    <img v-lazy="album.pic">
                  </div>
                  <div class="info">
                    <h2 class="title">{{album.username}}</h2>
                    <p class="desc">{{album.title}}</p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </main>
      </div>
    </Scroll>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, onMounted, ref } from 'vue'
import { getRecommend } from '@/service/recommend'
import Slide from '@/components/base/slide/index.vue'
import Scroll from '@/components/base/scroll/index.vue'
export interface SlideProp {
  id: string;
  link: string;
  pic: string;
}
interface AlbumsProp {
  id: string;
  title: string;
  pic: string;
  username: string;
}
export default defineComponent({
  components: {
    Slide,
    Scroll
  },
  setup () {
    const sliders = ref<SlideProp[]>([])
    const albums = ref<AlbumsProp[]>([])
    const loading = ref<boolean>(false)
    onBeforeMount(async () => {
      loading.value = true
      console.log('onBeforeMount')
      const { albums: alb, sliders: sli } = await getRecommend()
      albums.value = alb
      sliders.value = sli
      loading.value = false
    })
    return {
      sliders,
      albums,
      loading,
      loadText: '别急啊'
    }
  }
})
</script>

<style lang="scss">
.recommend {
  position: fixed;
  width: 100%;
  top: 85px;
  bottom: 0;
  overflow: scroll;
  main {
    .hot-singer {
      .list-title {
        height: 65px;
        line-height: 65px;
        text-align: center;
        color: $color-theme;
      }
      .hot-singer-ul {
        .hot-singer-li {
          .link-a {
            display: block;
            display: flex;
            padding: 0 20px 20px 20px;
            .pic {
              img {
                width: 60px;
                height: 60px;
              }
            }
            .info {
              flex: 1;
              padding-left: 10px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              .title {
                color: #fff;
              }
              .desc {
                color: hsla(0,0%,100%,.3);
              }
            }
          }
        }
      }
    }
  }
}
</style>
